<template>
  <div class="net-lan relative">
    <page-loading></page-loading>
    <div class="mb20">
      <os-input v-model="ipaddr" :item="$t('network.lan.fields[0]')"></os-input>
      <os-input v-model="netmask" :item="$t('network.lan.fields[1]')"></os-input>
      <div class="value alone-right">
        <div class="btn btn-blue" @click="set_lan_config">{{$t('btn.save')}}</div>
      </div>
    </div>
    <div class="view-table mb20">
      <div class="table-title">
        {{info.title}}
      </div>
      <table class="table-center">
        <colgroup>
          <col class="w40">
          <col class="w50">
          <col class="w70">
          <col class="w50">
          <col class="w50">
          <col class="w40">
          <col class="w40">
          <col class="w60">
        </colgroup>
        <thead>
          <tr>
            <th v-for="(item, idx) in info.head" :key="idx">{{item}}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td v-for="(item, idx) in info.value"
            :key="idx"
            :class="{'text-orange': idx==4 || idx==6, 'text-green': idx==3||idx==5||idx==7}">
              {{item ? item : "--"}}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="toolbar">{{$t('network.lan.toolbar')}}</div>
  </div>
</template>

<script>

  export default {
    data(){
      return {
        lan_config: '',
        lan_status: '',
        ipaddr: '',
        netmask: '',
        timer: null,
        count: 0,
      }
    },
    computed: {
      info(){
        let value = this.$t('network.lan.info').value
        value[0] = this.$t("home.protoMap")[this.lan_status.proto]
        value[1] = this.lan_status.ipaddr
        value[2] = this.lan_status.macaddr
        value[3] = this.formatValue(this.formatByte(this.lan_status.tx))
        value[4] = this.formatValue(this.formatByte(this.lan_status.rx))
        value[5] = this.lan_status.txall
        value[6] = this.lan_status.rxall
        value[7] = this.formatDuration(this.lan_status.uptime) // total time
        return this.$t('network.lan.info')
      }
    },
    methods: {
      transferTotal(origin){
        if(Number(origin)< 1024*1024*1024){
          let count = Number(origin) / (1024*1024)
          let result = Math.floor(count*100)
          return result / 100 + 'MB'
        }
        let count = Number(origin) / (1024*1024*1024)
        let result = Math.floor(count*100)
        return result / 100 + 'GB'
      },
      get_lan_config(){
        this.$req.get('/webapi?op=get_lan_config').then(res=> {
          let data = res.data
          this.ipaddr = data.ipaddr
          this.netmask = data.netmask
          this.lan_config = res.data
        })
      },
      get_lan_status() {
        this.$req.get("/webapi?op=get_lan_status").then(res=> {
          let data = res.data
          // console.log(res.data)
          data.txall = this.formatByte(data.txall)
          data.rxall = this.formatByte(data.rxall)
          this.lan_status = data
          console.log(this.lan_status)
          console.log(data)
        }).catch(err=> {})
      },
      set_lan_config(){
        // console.log(location)
        // return
        if(!this.isValidIP(this.ipaddr, this.netmask)){
          return
        }
        let params = {
          ipaddr: this.ipaddr,
          macaddr: this.info.value[2],
          netmask: this.netmask,
        }
        console.log('请求参数', params)
        let loading = this.createLoading()
        this.proxy_req("get", "/webapi?op=set_lan_config", params, res=> {
          if(res.code == "1"){
            this.lan_config.ipaddr = params.ipaddr
            if(this.lan_status.ipaddr!=params.ipaddr) {
              //  window.location  href protocol host hostname port
              let url = window.location.href
              let arr = url.split("//")
              let arr2 = arr[1].split("/")
              arr2[0] = params.ipaddr
              arr2 = arr2.join("/")
              arr[1] = arr2
              arr = arr.join("//")
              setTimeout(()=> {
                window.location.href = arr
              }, 8000)
            }
            loading.close()
          } else {
            loading.close()
          }
        }, true, )
      }
    },
    created(){
      this.get_lan_config()
      this.get_lan_status()
      this.$bus.emit('changeTab', 2),
      this.timer = setInterval(this.get_lan_status, 2000)
    },
    activated() {
      this.$bus.emit('changeTab', 2),
      this.timer = setInterval(this.get_lan_config, 3000)
    },
    deactivated(){
      clearInterval(this.timer)
    },
    beforeDestroy(){
      clearInterval(this.timer)
    }
  }
</script>

<style lang="scss" scoped>

</style>
